<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用Jquery操作DOM</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"/> -->
    <!--   引入jQuery -->
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script src="js/assist.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function(){
          //获取到p节点元素
        //   var $para = $("p");
        //   //获取到第二个li节点元素
        //   var $li = $("ul li:eq(1)");
        //   var ul_text = $li.attr("title");
        //   var li_text = $li.text();
        //   //获取到p节点属性的值
        //   var p_text = $para.attr("title");
        //   alert(li_text);
        //   alert(p_text);
        //   alert(ul_text);

         //插入节点
        //  var $li_1 = $("<li>11111</li>");
        //  var $li_2 = $("<li>22222</li>");
         //获取到ul节点
        //  var $parent = $("ul");
        //  $parent.append($li_1);
        //  $parent.append($li_2);

         //复制节点
         //获取到ul中所有的li节点并添加click事件
         $("ul li").click(function(){
             //this表示当前你所点击的li对象
            $(this).clone(true).appendTo("ul");
         })

        // 设置获取HTML的文本值
         $("input:eq(0)").click(function(){
            alert($("p").html());
         })

         //获取p元素的文本
         $("input:eq(1)").click(function(){
            alert($("p").text());
         })

         $("input:eq(2)").click(function(){
            $("p").html("<strong>新设置的内容</strong>");
         })

         $("input:eq(3)").click(function(){
            $("p").text("这是新设置的文本内容");
         })

         $("input:eq(4)").click(function(){
            alert($(this).val());
         })

         $("input:eq(5)").click(function(){
            $(this).val("我被点击了");
         })
       })
    </script>
</head>
<body>
    <input type="button" value=获取p元素的HTML代码" id="btn1"/>
    <input type="button" value=获取p元素的文本" id="btn2"/>
    <input type="button" value=设置p元素的HTML代码" id="btn3"/>
    <input type="button" value=设置p元素的文本" id="btn4"/>
    <input type="button" value=获取按钮的value值" id="btn5"/>
    <input type="button" value=设置按钮的value值" id="btn6"/>
    <p title="选择你最喜欢的水果"><strong>你最喜欢的水果是?</strong></p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="香蕉">香蕉</li>
        <li title="菠萝">菠萝</li>
    </ul>
</body>
</html>
